<template>
    <div class="column spinning">
        <q-spinner-dots
          color="primary"
          size="2em"
        />
        <div>登录成功，正在跳转中</div>
    </div>
  </template>
  
  <script setup>
  import { onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  
  const router = useRouter();

  // 解析 URL hash 参数的函数
  function parseHashParams() {
    const hash = window.location.hash.substring(1); // 移除 #
    const params = new URLSearchParams(hash.split('?')[1]); // 获取 ? 后面的参数
    
    const tokenData = {};
    for (let [key, value] of params.entries()) {
      tokenData[key] = value;
    }
    
    return tokenData;
  }
  
  // 存储 token 到 localStorage
  function saveTokenToStorage(tokenData) {
    try {
      // 保存完整的 token 信息
      localStorage.setItem('oauth_token', JSON.stringify({
        access_token: tokenData.access_token,
        refresh_token: tokenData.refresh_token,
        token_type: tokenData.token_type,
        expires_in: parseInt(tokenData.expires_in),
        issue_date: parseInt(tokenData.issue_date)
      }));
      return true;
    } catch (error) {
      console.error('保存 token 失败:', error);
      return false;
    }
  }
  
  // 处理 OAuth2 回调
  const handleOAuthCallback = () => {
    // 检查当前路由是否是回调页面
    if (router.currentRoute.value.path === '/auth-callback') {
      const tokenData = parseHashParams();
      
      if (tokenData.access_token) {
        // 保存 token
        if (saveTokenToStorage(tokenData)) {
          // 清除 URL 中的敏感信息
          window.history.replaceState({}, document.title, window.location.pathname);
          
          // 延迟跳转，让用户看到成功提示
          setTimeout(() => {
            router.push('/profile');
          }, 2000);
        }
      } else {
        console.error('未获取到有效的 access_token');
        router.push('/login');
      }
    }
  };
  
  onMounted(() => {
    handleOAuthCallback();
  });
  </script>

<style scoped>
.spinning {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  height: 100vh;            /* 让容器高度占满整个视口 */
  padding: 20px;
  text-align: center;
}
</style>